<template>
	<div class="check-self">
		<van-sticky>
			<component
				:is="searchTemp"
				v-model="state.keywords"
				placeholder="请输入隐患整改事件"
			/>
		</van-sticky>
		<van-sticky>
		</van-sticky>
		<van-pull-refresh v-model="state.refresh" @refresh="onRefresh">
			<div class="total" v-if="state.total">{{ `共有${state.total}条记录` }}</div>
			<van-list
				:loading="state.loading"
				:finished="state.finished"
				:finished-text="state.list?.length !== 0 ? '———— 已经到底了哦 ————' : '' "
				@load="getList"
			>
				<div class="lists" v-if="state.list?.length">
					<component
						:is="checkSelfItem"
						v-for="item in state.list"
						:key="item.id"
						:details="item"
						@click="onClick(item)"
					/>
				</div>
				<component
					:is="empty"
					v-if="!state.list?.length && !state.loading"
				/>
			</van-list>
		</van-pull-refresh>

	</div>
</template>

<script setup>
import { reactive, nextTick } from 'vue'
import searchTemp from '@/components/searchTemp'
import empty from '@/components/empty'
import checkSelfItem from './components/checkSelfItem'
import { checkSelfLog } from '@/service/api'
import { useBuildingStore } from '@/store'
import { storeToRefs } from 'pinia'
import { useRouter } from 'vue-router'

const buildingStore = useBuildingStore()
const { buildingInfo } = storeToRefs(buildingStore)

const router = useRouter()
const state = reactive({
	keywords: '',
	loading: false,
	finished: false,
	refreshing: false,
	isEmpty: false,
	total: 0,
	page: 1,
	pageSize: 10,
	list: []
})

const onRefresh = () => {
	state.list = []
	state.page = 1
	state.refresh = false
	state.loading = false
	state.finished = true
	nextTick(() => {
		state.finished = false
	})
}

const getList = async () => {
	const params = {
		pageindex: state.page -  1,
		limit: state.pageSize,
		fwbh: buildingInfo.value.fwbh
	}
	try {
		state.loading = true
		const result = await checkSelfLog(params)
		state.loading = false
		state.list = [...state.list, ...result.data.items]
		state.total = result.data.total
		if (state.page * state.pageSize >= state.total) {
			state.finished = true
		}
		state.page++
	} catch (err) {
		state.loading = false
		state.finished = true
	}
}

const onClick = record => {
	router.push({
		name: 'inspection-check-self-detail',
		query: {
			id: record?.id
		}
	})
}

</script>

<style scoped lang="less">
.check-self {
	.search-temp {
		background: #fff;
	}
	.total {
		height: 82px;
		line-height: 82px;
		text-align: center;
		color: #696969;
	}
}
</style>
